<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
拖动滑块验证
<div class="slider-container">
    <div class="slider-background">
        <div class="gap-fixed"></div> <!-- 固定缺口位置 -->
        <div class="slider">
            <div class="gap">拖我</div> <!-- 缺口图放置在滑块内部 -->
        </div>
    </div>
</div>

</body>
<script>
    // 模拟横轴滑动位置
    const mockPositionX = 360;
    // JavaScript
    const slider = document.querySelector('.slider');
    let isDragging = false;
    let startPositionX = 0;

    slider.addEventListener('mousedown', (e) => {
        isDragging = true;
        startPositionX = e.clientX;
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;

        let offsetX = e.clientX - startPositionX;
        slider.style.transform = `translateX(${offsetX}px)`;
    });

    document.addEventListener('mouseup', () => {
        if (!isDragging) return;

        const transformX = Math.abs(parseInt(slider.style.transform.slice(11)));
        if (transformX < mockPositionX + 10 && transformX > mockPositionX - 10) {
            // 验证通过
            // document.querySelector('.slider-trabecula').style.background='rgb(12 160 18 / 50%)';
            alert("验证通过")
            // 关闭滑块
            // 此处可以触发后续操作，如登录、列表加载等
        } else {
            // 验证失败
            // document.querySelector('.slider-trabecula').style.background='rgb(249 2 2 / 50%)';
            alert("验证失败")
            setTimeout(() => {
                // document.querySelector('.slider-trabecula').style.background='rgb(204 204 204 / 50%)';
                slider.style.transform = 'translateX(0)';
            }, 1500);
        }
        isDragging = false;
    });

</script>
<style>
    .slider-container {
        width: 500px; /* 背景图宽度 */
        height: 300px; /* 背景图高度 */
        margin: 20px auto;
        position: relative;
    }

    .slider-background {
        width: 100%;
        background: url('img/1.jpg'); /* 背景图URL */
        background-size: 100% 100%; /* 背景图铺满 */
        border-radius: 5px;
        height: 300px;
        position: relative;
        overflow-x: hidden;
    }

    .slider {
        width: 80px; /* 滑块宽度 */
        height: 50px;
        background-color: #3498db;
        border-radius: 5px;
        position: absolute;
        cursor: pointer;
        user-select: none; /* 禁止文本选中 */
        bottom: 10px; /* 滑块位于底部 */
        z-index: 2;
        transition: transform 0.2s ease; /* 添加平滑动画效果 */
    }
    /*.slider-trabecula {*/
    /*    bottom: 10px;*/
    /*    width: 100%;*/
    /*    height: 50px;*/
    /*    position: absolute;*/
    /*    z-index: 1;*/
    /*    background: rgb(204 204 204 / 50%);*/
    /*}*/

    .gap {
        width: 75px; /* 缺口图的宽度 */
        height: 50px; /* 缺口图的高度 */
        background-image: url('img/1.1.jpg'); /* 缺口图的URL */
        background-size: 100% 100%;
        position: absolute;
        top: -112px;
        box-shadow: 0px 0px 5px 1px #ccc;
    }
    .gap-fixed {
        width: 75px; /* 缺口图的宽度 */
        height: 50px; /* 缺口图的高度 */
        position: absolute;
        bottom: 122px;
        left: 358px;
        box-shadow: 0px 0px 5px 1px #ff0000;
    }

</style>
</html>